<template>
    <div id="total">
        <div class="food-item" v-for="(item,index) in restaurants.items" @click="gotoRestaurant">
            <div class="food-item-one">
                <!--				<img :src=bussiness[1].img_path>-->
                <img  src="../../assets/img/home/shop/business4.png">
                <div class="food-info">
                    <span>{{item.restaurant.name}}</span>
                    <span>{{item.restaurant.rating==0?"暂无评":item.restaurant.rating}}分
						月售{{item.restaurant.recent_order_num}}单
						<div style="background-color: #0af; color: #FFFFFF;border-radius: 2px; font-size: 11px;">蜂鸟专送
						</div>
					</span>
                    <div>
                        <div>
                            <span>{{item.restaurant.float_minimum_order_amount}}¥起送</span>|<span>{{item.restaurant.piecewise_agent_fee.description}}</span>
                        </div>
                        <div>
                            <span>{{(item.restaurant.distance/1000).toFixed(1)}}km</span>|<span>{{item.restaurant.order_lead_time}}min</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="food-item-two">
                <span style="color: rgb(102, 102, 102);border-color: rgb(221, 221, 221);border: .266667vw solid #ddd; width: 13vw; font-size: 10px;text-align: center;">{{item.restaurant.flavors[0].name}}</span>
                <div class="discount-tol" v-for="(item,i) in item?.restaurant?.activities">
                    <div class="discount"><span
                            :class="{'jian':item.icon_name=='减','pei':item.icon_name=='配','te':item.icon_name=='特','shou':item.icon_name=='首','zhe':item.icon_name=='折','zeng':item.icon_name=='赠'}">{{item.icon_name||""}}</span><span>{{item.description||""}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="height: 8vh;background-color:#fff;"></div>
</template>

<script>
    import restaurants from "../../data/json/julizuijin.json";

    export default {
        name: "Ju-li-zui-jin",
        data() {
            return {
                restaurants,
                bussiness:{}
            }
        },
        methods: {
            gotoRestaurant(){
                //跳转到上一次浏览的页面  this.$router.go(-1)
                // this.$router.go(-1)

                //指定跳转的地址 this.$router.replace('/menu')
                this.$router.replace('/reataurants')

                //指定跳转的路由的名字下 this.$router.replace({name:'menu'})
                // this.$router.replace({name:'menu'})

                //通过push进行跳转
                // this.$router.push('/menu')
            }
        },
        mounted:function (){
            // this.$axios({
            //     method: "get",
            //     url:'/gethomeshop'
            // }).then((result) => {
            //     console.log(result.data)
            //     this.bussiness=result.data
            // })
        }
    }
</script>

<style scoped>
    #total {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }

    .te {
        background-color: rgb(241, 136, 79);
    }

    .jian {
        background-color: rgb(240, 115, 115);
    }

    .shou {
        background-color: rgb(112, 188, 70);
    }

    .zhe {
        background-color: rgb(60, 199, 145);
    }

    .zeng {
        background-color: rgb(60, 199, 145);
    }
    .pei{
        background-color: rgb(112, 188, 70);
    }

    .food-item {
        width: 92vw;
        /*height: 25vh; */
        display: flex;
        flex-flow: column nowrap;
        border-radius: 8px;
        background-color: #FFFFFF;
        margin: 1vh 2vw;
        padding: 4vw 0;
        border-bottom: .133333vw solid #eee;
        border-top: .133333vw solid #eee;
    }

    .food-item-one {
        display: flex;
        padding: 0 2.666667vw;
    }

    .food-item-one>div {
        flex: 1;
        display: flex;
        flex-flow: column nowrap;
    }

    .food-item-one>img {
        width: 12vh;
        height: 12vh;
        padding-right: 2vw;
    }

    .food-info {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
    }

    .food-info>span:nth-child(1) {
        display: flex;
        margin: 0;
        padding: 0;
        color: #333;
        font-weight: 700;
        font-size: 16px;
        overflow: hidden;
    }

    .food-info>span:nth-child(2) {
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        color: #666;
        list-style: none;
        font-size: 12px;
        line-height: normal;
    }

    .food-info>div {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #666;
    }

    .food-item-two {
        padding-left: 25vw;
        display: flex;
        flex-flow: column;
        margin-top: 1vh;
    }

    .discount-tol {
        display: flex;
        flex-flow: column;
    }

    .discount {
        display: flex;
        flex-flow: row;
        align-items: flex-start;
        padding-top: 1vh;
    }

    .discount>span:nth-child(1) {
        color: #FFF;
        display: inline;
        font-size: 12px;
        line-height: 12px;
    }

    .discount>span:nth-child(2) {
        color: #666;
        font-size: 12px;
        line-height: 12px;

        display: inline;
        width: 45vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>